<!-- 我的 -->
<template>
  <div class="container mine">
    <div class="top">
      <div class="avatar_box">
        <img :src="userInfo.headimgurl" alt="">
        <span>{{userInfo.nickname}}</span>
      </div>
    </div>

    <div class="minddle">
      <ul class="userInfo_list">
        <li class="userInfo_item">
          <van-cell title="孩子昵称" is-link @click="toUserInfo" :value="formData.studentName" />
        </li>
        <li class="userInfo_item">
          <van-cell title="性别" is-link @click="toUserInfo" :value="formData.sex" />
        </li>
        <li class="userInfo_item">
          <van-cell title="手机号" is-link @click="toUserInfo" :value="formData.linkPhone" />
        </li>
        <li class="userInfo_item">
          <van-cell title="联系人" is-link @click="toUserInfo" :value="formData.linkPerson" />
        </li>
      </ul>
    </div>
    
    <div class="bottom">
      <div class="title_box">
        <i class="icon_classTitle"></i>
        <h4>我的订单</h4>
      </div>
      <ul class="class_list">
        <li class="class_item" v-for="(item, index) in formData.bmSchoolOpenOnlineOutList" :key="index" @click="toPay(item)">
          <div class="class_info_box">
            <div class="class_img">
              <img src="../assets/img/class_img.png" alt="">
            </div>
            <div class="class_info">
              <div class="class_name_box">
                <div class="class_name">{{item.productName}}</div>
                <i class="btn_share" @click="showShare = true" v-if="item.paymentStatus != '10'"></i>
                <i class="icon_noPay" v-else></i>
              </div>
              <div class="price">
                <span class="original_price">￥{{item.productPrice}}</span>
                <span class="discount_price">￥{{item.discountPrice}}</span>
              </div>
              
              <div v-if="item.paymentStatus != '10'">
                <div class="code_box" v-if="item.subjectPackageCode">
                  <div class="class_code">课程码 {{item.subjectPackageCode}}</div>
                  <div class="btn btn_how_to_work btnHover" @click="toStudy">去上课</div>
                </div>

                <div class="class_text" v-if="!item.subjectPackageCode">
                  课程顾问将会在24小时内和您联系安排上课，请耐心等待！
                </div>
              </div>

              
            </div>
          </div>

          <div class="class_info2">
            <span class="time">{{item.createTime}}</span>
            <span class="order_code">订单号：{{item.orderCode}}</span>
          </div>
          
        </li>
      </ul>
    </div>

    <!-- <van-popup
      v-model="showHowToWork"
      position="right"
      :style="{ width: '100%',height: '100%' }">
      <div class="pop_container">
        <div class="return_box" @click="returnBack">
          <span>返回</span>
        </div>
        <div style="position:relative;">
          <img src="../assets/img/img_howto_01.jpg" alt="">
          <div class="toStudy" @click="toStudy"></div>
        </div>
        <img src="../assets/img/img_howto_02.jpg" alt="">

      </div>
    </van-popup> -->

    <van-popup
      v-model="showShare"
      class="share_pop"
    >
      <div class="share_container" @click="showShare = false;">
        <img src="../assets/img/share_bg.png" alt="">
        <span class="share_txt">点击右上角分享给好友</span>
      </div>
    </van-popup>
  </div>
</template>


<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");
export default {
  data() {
    return {
      showHowToWork: false,
      showShare: false,
      userInfo: {},
      formData: {
        studentName: '',
        linkPhone: '',
        sex: '',
        linkPerson: '',
      }
    }
  },

  created() {
    this.initData();
    this.initUserData();
    this.insertPvUv();
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    insertPvUv() {
      this.post({
        API: 'insertPvUv',
        data: {
          openId: localStorage.getItem('openId'),
          pageName: '个人中心',
          pageType: 'personCenter'
        }
      }).then(res => {

      })
    },

    toPay(item) {
      // 待支付状态 跳转支付
      if(item.paymentStatus == '10') {
        this.$router.push({
          name: 'order',
          query: {
            orderCode: item.orderCode,
            continue: '1'
          }
        })
      }
    },

    initUserData() {
      this.formGet({
        API: 'getUserInfo',
        data: {
          openId: localStorage.getItem('openId')
        }
      }).then(res => {
        this.userInfo = res;
      })
    },

    initData() {
      let data = {
        openId: localStorage.getItem('openId'),
      }

      this.formGet({
        API: 'queryStudentByOpenId',
        data: data
      }).then(res => {
        if(res) {
          if(res.sex == 1) {
            res.sex = '男';
          }else if (res.sex == 2) {
            res.sex = '女';
          }
          this.formData = res;
          console.log(this.formData)
        }
      }).catch(err => {
        this.$toast(err);
      })
    },

    returnBack() {
      this.showHowToWork = false;
    },

    toUserInfo() {
      this.$router.push({
        name: 'userInfo',
        params: {
          openId: localStorage.getItem('openId')
        }
      })
    },

    toStudy() {
      window.location.href="http://www.mingxiaoclub.cn/zebraOnline/#/login"
    },
  }

}

</script>
<style>
.share_pop {
  background: transparent !important;
  top: 23% !important;
  left: 58% !important;
}
.share_txt {
  color: #FFD33D;
  font-size: .5rem
}

</style>
<style scoped>
.mine .top {
  width: 100%;
  height: 4.16rem;
  background: url('../assets/img/bg1.png') 0 0 no-repeat;
  background-size: 100%;
}
.mine .top .avatar_box{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.6rem;
}
.mine .top .avatar_box img {
  width: 1.893333rem;
  height: 1.893333rem;
  border-radius: 50%;
}
.mine .top .avatar_box span{
  font-size: .4rem;
  color: #333333;
}

.mine .minddle {
  margin-bottom: .173333rem;
}
.mine .minddle .userInfo_item {
  margin-top: .133333rem;
}
.mine .bottom {
  padding: 0 .373333rem;
  box-sizing: border-box;
}
.mine .bottom .class_list {
}
.mine .bottom .class_item {
  position: relative;
  background: #fff;
  border-radius: .213333rem;
  margin-bottom: .133333rem;
}

.mine .bottom .class_list .class_info_box {
  padding: .213333rem .186667rem;
  box-sizing: border-box;
  border-bottom: .013333rem solid #E7E7E7;
}
.class_info2 {
  font-size: .266667rem;
  color: #999999;
  padding: .16rem .293333rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discount_price {
  margin-top: .133333rem;
}
.code_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code_box .class_code {
  padding: .066667rem .12rem;
  display: inline-block;
  font-size: .32rem;
  color: #80D784;
  border-radius: .106667rem;
  border: .013333rem solid rgba(128,215,132,1);
}

.mine .bottom .title_box {
  display: flex;
}

.mine .class_info .price {
  display: flex;
  flex-direction: column;
  margin-bottom: .36rem;
}

.btn_how_to_work {
  width: 1.986667rem;
  height: .693333rem;
}

.mine .class_info_box .class_name {
  color: #333;
  font-size: .4rem;
  font-weight: bold;
}
.mine .class_info_box .class_hour {
  margin-bottom: .303333rem;
}

.mine .class_img {
  height: auto !important;
  font-size: 0;
}

.class_name_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .3rem;
}
.mine .btn_share {
  width: .453333rem;
  height: .4rem;
  display: inline-block;
  background: url('../assets/img/icon_share.png') 0 0 no-repeat;
  background-size: contain;
}

.class_text {
  color: #FFD33D;
  font-size: .293333rem
}
.pop_container {
  position: relative;
  font-size: 0;
}
.pop_container img {
  width: 100%;
}

.toStudy {
  width: 3.386667rem;
  height: 1.066667rem;
  background: url('../assets/img/btn_howto.png') 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* top: 9rem; */
  bottom: 0.5rem;
  box-shadow:0px 0px 5px 1px rgba(215,214,214,0.5);
  border-radius: 35px;
}


.share_container img {
  width: 6.76rem;
  height: 5.533333rem;
}

.icon_noPay {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background: url('../assets/img/icon_noPay.png') 0 0 no-repeat;
  background-size: contain;
}
</style>
